<template>
    <div class="zbox">
      <headTop :headTitle="encodeURI('确认订单')"/>
      <div class="zbaff1 zbaff2">
        <ul>
          <li class="li1 clearFloat">
            <div class="myOrder_tt">
              <span><i><img src=" ../images/bwm.jpg"/></i>北京宝马</span>
            </div>
            <div class="ig fl"><img src="http://rp.hengtianche.com/htc_car_wx/images/ls/index_img1.png" /></div>
            <div class="fon fr">
              <div class="fon_sp "><span class="fon1">2017款 45 TFSI quattro 风尚型 丐版 </span><span class="fontright">￥85.9万</span></div>
              <div class="clearFloat"></div>
              <div class="fon_sp fon3">2017.10.02 零首付大众途观</div>
              <div class="fon_sp fon3">保险服务 ￥12.00万   X10</div>
              <div class="fon_sp fon2">高配 白色</div>
              <div id="modifyNumDom" class="num_wrap" >
                <span class="minus disabled" >-</span>
                <input class="num" type="tel" value="25">
                <span class="plus" >+</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="fl_line">

      </div>
      <div class="zfund_cont5">
        <a href="javascript:;">
          <i><img src="/static/images//ticket.png"></i>
          <span>选择港口</span>
          <i class="arrow"><img src="/static/images/back_light.png"></i>
        </a>
      </div>
      <input type="hidden" id="money" value="0.01" />
      <div class="zdetail_btns"><a href="javascript:;" ><input id="payBill" type="submit" value="确定下单"></a></div>
      <div class="zdetail_btns"><a href="javascript:;" ><input id="payBill2" type="submit" value="测试"></a></div>
      <foot></foot>
    </div>
</template>

<script>
    import headTop from "src/components/header/head"
    import foot from '../../components/footer/footGuide'
    export default {
        name: "index",
      components : {
        headTop,foot,
      }
    }
</script>

<style lang="scss"  scoped>
  @import "../../style/common";
  @import "../../style/mixin";
  .zbaff1 ul{margin-bottom: 1.25rem;}
  .zbaff1 ul li{padding: 0.28rem 0.02rem;margin-bottom: 0.04rem;background: #fff;text-align: left;}
  .zbaff1 ul li a{height: 100%;margin-bottom: .26rem;display: inline-block;width: 100%;}
  .zbaff1 ul li .ig{margin-left: 0.24rem;}
  .zbaff1 ul li .ig img{vertical-align: middle;width: 1.5rem;height: 1.5rem;}
  .zbaff1 ul li .fon{width: 5.65rem;position: relative;float: left;}
  .zbaff1 ul li .fon .fon_sp{padding-left: 0.22rem;}
  .zbaff1 ul li .fon .fon1{line-height: 0.32rem;color: #666;font-size: 0.28rem;padding-top: 0.05rem;width: 4rem;float: left;}
  .fon2{line-height: 100%;font-size: 0.22rem;margin-top: 0.14rem;}
  .zbaff1 ul li .fon .fon3{line-height: 0.25rem;color: #ccc;font-size: 0.22rem;margin-top: 0.14rem;}
  .zbaff1 ul li .fon .fon4{line-height: 0.25rem;color: #666;font-size: 0.22rem;padding-top: 0.12rem;margin-top: 0.24rem;text-align: right;padding-right: 0.2rem;}
  .zbaff1 ul li .fon .fon4 input{color: #fff;padding:0.1rem 0.3rem;background: #FA2F5D;border: none;border-radius: 0.5rem;float: right;margin-left: 0.2rem;}
  .zbaff1 ul li .fon .fon4 input.btn_line{border: 1px solid #9B9B9B;color: #888;background: none;}
  .zbaff1 ul li .fon .fon5{position: absolute;right: 0.2rem;top:0.55rem;color: #9B9B9B;font-size: 0.2rem;line-height:0.32rem;text-align: right;}
  .zbaff1 ul li .fon .fontright{position: absolute;right: 0.16rem;line-height: 0.32rem;font-size: 0.28rem;top: 0.06rem;color: #9B9B9B;}
  .fon2{color: #888;}
  .zbaff1 ul li.li2 .fon .fon2{color: #9B9B9B;}
  .myOrder_tt{border-bottom: dashed 1px #dddddd;margin-bottom:0.2rem ;}
  .myOrder_tt span{line-height: 0.60rem;font-size: 0.28rem;color: #666;margin-left: 0.24rem;}
  .myOrder_tt span i img{width: 0.4rem;padding-right: 0.1rem;padding-bottom: .1rem;}
  .myOrder_tt span.des{float: right;color: #71b247;margin-right: 0.2rem;font-size: 0.22rem;}
  .myOrder_tt label{height: 0.4rem;}
  .myOrder_tt input[type=checkbox]{width: 0.2rem;height: 0.2rem;}

  .zbaff2 ul li .fon .fon6{color: #4A4A4A;font-size: 0.22rem;line-height: .36rem;margin-top: 0.2rem;border-top: dashed 1px #dddddd;padding-top: 0.22rem;display: inline-block;}
  .zbaff2 ul li .fon .fon6 span{padding:0 .1rem;border: solid 1px #ffcd79;border-radius: 3px;color: #ee9b11;height: 0.36rem;line-height: 0.36rem;margin-bottom: .1rem;float: left;margin-right: .1rem;}


  /*提交订单那*/
  .num_wrap{position: absolute;right: 0rem;bottom: 0;width: 2rem;}
  .num_wrap span {position: relative;float: left;width: 0.6rem;height:0.6rem;line-height: 30px;background: #f7f7f7;text-align: center;font-size: 0.3rem;color: #999;}
  .order_info .hproduct .sku span {color: #333;}
  .num_wrap input,.num_wrap span{position:relative;float:left}
  .num_wrap .num{-webkit-appearance:none;border-radius:0;width:0.6rem;height:0.6rem;line-height:normal;border:0;border-left:1px solid #fff;border-right:1px solid #fff;background:#f7f7f7;font-size:12px;text-align:center}
  .num_wrap .plus {border-radius: 0 2px 2px 0;}
  .num_wrap .minus {border-radius: 2px 0 0 2px;}
  .fl_line{background:#f5f4f9;height: 0.2rem;}

  .zfund_cont5{padding: 0 0.45rem;height: 0.88rem;line-height: 0.88rem;border-bottom: 1px solid #F4F4F4;background: #fff;}
  .zfund_cont5 a{display: block;height: 100%;}
  .zfund_cont5 a i{display: block;float: left;}
  .zfund_cont5 a i img{width: 0.36rem;}
  .zfund_cont5 a span{display: inline-block;line-height: 0.88rem;color: #666;font-size: 0.22rem;padding-left: 0.25rem;}
  .zfund_cont5 a i.arrow{float: right;}
  .zfund_cont5 a i.arrow b{height: .3rem;line-height: .3rem;text-align: center;margin-top: .28rem;font-weight:100;width: .3rem;background: #fc6152;color: #fff;display: block;font-size: 0.12rem;float: left;border-radius: .3rem;}
  .zdetail_btns{width: 5.78rem;margin:auto;margin-top: 0.38rem;height: 0.8rem;line-height: 0.8rem;text-align: center;background: #fa2f5d;border-radius: 0.4rem;margin-bottom: 1.88rem;}
  .zdetail_btns input{display: block;width: 100%;height: 100%;border: none;outline: none;background: transparent;color: #fff;font-size: 0.28rem;}

  .zbox{background:#fff;}
</style>
